<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>积分兑换会员</title>
		{% load static %}
		<link rel="stylesheet" href="{% static 'news/css/number_vip.css' %}">

	</head>
	<body>
		<div id="head"></div>
		<div id="body_1"><span id="s1"><strong>积分兑换会员&nbsp;&nbsp;&nbsp;<a href="{% url 'news:my_integral' %}">返回</a>&nbsp;&nbsp;&nbsp;{{succeed}}</strong></span>
			</div>
		<div id="body_2">
			<div id="body_3">
				<div id="body_4">
					<p class="p1"><strong>支付积分:</strong> <span class="sp1">￥80,000</span> &nbsp;&nbsp;原VIP{{user.vip}}级抵扣20,000</p>
					<div id="xz">
						请选择购买方式
					</div>
					<form action="{% url 'news:exchange' %}" method="post">
						{% csrf_token %}
						<input type="radio" name="g" id="v1" value="1"  class="v1"/>
						<input type="radio" name="g" id="v2" value="2" class="v1"/>
						<input type="radio" name="g" id="v3" value="3" class="v1"/>

						<label for="v1" id="vip1" class="vip1"><img src="{% static 'news/images/chongzhi/v1.png' %}" class="v4"> <span class="sp2">20,000</span><span class="sp3">每个月可免费发 <br>布2条新闻</span></label>
						<label for="v2" id="vip2" class="vip1"><img src="{% static 'news/images/chongzhi/v2.png' %}" class="v4"><span class="sp2">50,000</span><span class="sp3">每个月可免费发 <br>布5条新闻</span></label>
						<label for="v3" id="vip3" class="vip1"><img src="{% static 'news/images/chongzhi/v3.png' %}" class="v4"><span class="sp2">100,000</span><span class="sp3">每个月可免费发 <br>布10条新闻</span></label>
						<input type="button" id="tj" value="确认支付" />
					</form>
                </div>

			</div>
		</div>
    </body>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
		var a = document.getElementsByClassName('vip1');
			b = {{user.integral}}
		a[0].onclick = function(){
			a[0].style.border = 'blue 2px solid';
			a[1].style.border = '#D9D9D9 1px solid';
			a[2].style.border = '#D9D9D9 1px solid';
			$('.sp1').html('￥20,000');
			console.log(b)
			console.log(b>20)
			if(b>20){
				$('#tj')[0].type = 'submit'
			}else{
				alert('积分不足')
			};
		}


		a[1].onclick = function(){
			a[1].style.border = 'blue 2px solid'
			a[2].style.border = '#D9D9D9 1px solid'
			a[0].style.border = '#D9D9D9 1px solid'
			$('.sp1').html('￥50,000')
			if(b>50){
				$('#tj')[0].type = 'submit'
			}else{
				alert('积分不足')
			};
		};

		a[2].onclick = function(){
			a[2].style.border = 'blue 2px solid'
			a[1].style.border = '#D9D9D9 1px solid'
			a[0].style.border = '#D9D9D9 1px solid'
			$('.sp1').html('￥100,000')
			if(b>100){
				$('#tj')[0].type = 'submit'
			}else{
				alert('积分不足')
			};
		};


	</script>
</html>

